<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model="xing" />
    <input type="text" v-model="ming" />
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <h2>调用方法</h2>
    <p>{{ getUserName() }}</p>
    <p>{{ getUserName() }}</p>
    <p>{{ getUserName() }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    xing: "张",
    ming: "三"
  }),
    // 计算属性，要写到 和 data 平级的 computed 中
  computed: {
    // 所有的计算属性，都放到这里。【计算属性，必须返回计算的结果】
    fullName() {
      console.log("调用了计算属性");
      return this.xing + this.ming;
    },
  },
  methods: {
    getUserName() {
      console.log("调用了方法");
      return this.xing + this.ming;
    },
  },
};
</script>

<style>
</style>